import React, { Component } from 'react';
import './Son.css';
import {connect} from 'react-redux';
import action from '../action';

class Son extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'xuancao',
            you: this.props.you,
            book:[
                {
                    name:'红楼梦',
                    des:'作者曹雪芹'
                },
                {
                    name:'三国演义',
                    des:'作者罗贯中'
                },
                {
                    name:'西游记',
                    des:'作者吴承恩'
                },
                {
                    name:'水浒传',
                    des:'作者施耐庵'
                }
            ]
        }
    }
    handle=()=>{
        var val=this.refs.btn.value
        console.log(val)
        this.props.click(123)
    }
    change=(e)=>{
         this.props.dispatch(action(e.target.value))
    }
    render() {
        return (
            <div>
                <button onClick={this.handle} >
                    点击
                    </button>
                <input onChange={this.handle} ref='btn'/>
                <p>{this.state.you}你好吗？</p>
                <table>
                    {this.state.book.map((index,i)=>{
                        return (<tr>
                            <td>{index.name}</td>
                            <td>{index.des}</td>
                            </tr>)
                    })}
                    </table>
                    内容：<input type="text"  onChange={this.change.bind(this)} value={this.props.content}/>
            </div>
        )
    }
}

function mapState(state){
     return {
        content: state.lzy.content
    }

}
export default connect(mapState)(Son)